<template>
  <div class='container'>
    <el-card class="box-card">
      <!-- 表单 -->
      <el-form ref="form"  label-width="80px">
        <el-row>
          <!-- 搜索框 -->
          <el-col :span="18">
            <el-col :span="4">
            <el-form-item label="学科名称">
              <el-input v-model="searchValue" style="width: 200px;"></el-input>
            </el-form-item>
            </el-col>
            <!-- 搜索清除按钮 -->
            <el-col :span="4">
              <el-form-item>
                <el-button size="small" @click="onClear">清除</el-button>
                <el-button type="primary" @click="onSubmit" size="small">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-col>
          <!-- 新增学科按钮 -->
          <el-col :span="6" style="text-align: right;">
            <el-button size="small" type="success" @click="onAdd">
              <i class="el-icon-edit"></i>
              新增学科
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 消息提示 -->
      <el-alert
        :title="'数据一共'+total+'条'"
        type="info"
        show-icon
        :closable="false">
      </el-alert>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        :header-cell-style="tableHeaderStyle"
        style="width: 100%">
         <el-table-column
          type="index"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          prop="subjectName"
          label="学科名称">
        </el-table-column>
        <el-table-column
          prop="username"
          label="创建者">
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="创建日期">
          <template slot-scope="{row}">
              {{ row.addDate|parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column
          prop="isFrontDisplay"
          label="前台是否显示">
          <template slot-scope="{row}">
          {{row.isFrontDisplay===0?'否':'是'}}
          </template>
        </el-table-column>
        <el-table-column
          prop="twoLevelDirectory"
          label="二级目录">
        </el-table-column>
        <el-table-column
          prop="tags"
          label="标签">
        </el-table-column>
        <el-table-column
          prop="totals"
          label="题目数量">
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作"
          width="250px">
          <template slot-scope="{row}">
            <!-- {{row}} -->
            <el-button type="text" @click="onClassify(row)">学科分类</el-button>
            <el-button type="text" @click="onTags(row)">学科标签</el-button>
            <el-button type="text" @click="onEdit(row)">修改</el-button>
            <el-button type="text" @click="onDelete(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        :current-page="page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pagesize"
        layout="prev, pager, next, sizes, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="margin-top: 20px; text-align: right;">
      </el-pagination>
      <!-- 添加学科对话框 -->
      <subjects-add
        v-model="addDialogVisible"
        @add-success="loadSubjectsList"
        @edit-success="loadSubjectsList"
        @reset="row={}"
        :row="row"
      />
    </el-card>
  </div>
</template>

<script>
import { list, remove } from '@/api/hmmm/subjects.js'
import subjectsAdd from '../components/subjects-add.vue'
export default {
  components: { subjectsAdd },
  data () {
    return {
      tableData: [],
      page: 1,
      pagesize: 10,
      addDialogVisible: false,
      total: 0,
      searchValue: '',
      row: {},
      deleteDialogVisible: false
    }
  },
  created () {
    this.loadSubjectsList()
    // this.onClassify()
  },
  methods: {
    // 加载学科列表
    async loadSubjectsList () {
      const res = await list({
        page: this.page,
        pagesize: this.pagesize,
        subjectName: this.searchValue
      })
      // console.log(res)
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    // 新增学科
    onAdd () {
      this.addDialogVisible = true
    },
    // 每页条数
    handleSizeChange (val) {
      this.pagesize = val
      this.loadSubjectsList()
    },
    // 当前页码改变
    handleCurrentChange (val) {
      this.page = val
      this.loadSubjectsList()
    },
    // 清除
    onClear () {
      this.searchValue = ''
      this.loadSubjectsList()
    },
    // 搜索
    onSubmit () {
      this.loadSubjectsList()
    },
    // 修改学科
    onEdit (row) {
      this.addDialogVisible = true
      this.row = row
    },
    // 删除学科
    onDelete (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // console.log('点击了删除')
        await remove({ id })
        this.loadSubjectsList()
        this.$message.success('删除成功')
      }).catch(() => {

      })
    },
    // 学科分类跳转
    onClassify (row) {
      console.log(row)
      this.$router.push({
        path: 'directorys',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    // 学科标签跳转
    onTags (row) {
      this.$router.push({
        path: 'tags',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    // 表头高亮
    tableHeaderStyle ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#F5F7FA;color:#1f2d3d'
      } else {
        return ''
      }
    }
  }
}
</script>

<style scoped lang='less'>
.box-card{
  margin: 20px;
}
/deep/.el-table{
  margin-top: 20px;
  .el-icon-arrow-right:before{
    font-size: 0;
    display: none;
  }
}
/deep/.el-table th.el-table__cell>.cell{
  color: #909399;
}
</style>
